<template>
	<view>
		<view class="pl10">
			<view class="p-10-0">
				<view class="ugrid">
					<view v-for="(v,i) in list" :key="i" @click="open(v)" class="uitem">
						<view class="w100 h100 pr10 pb10 bs6">
							<view class="bf bs6 p10 table"
								:style="{backgroundColor:v.state==2?'#C24243':v.state==1?'#3E9949':v.state==3?'#2979ff':v.state==4?'#DC6523':'',color:v.state==0?'#333':'#fff'}">
								<view class="grid-text f18 wei6 t-o-e">{{v.type &&v.type.name}}{{v.name}}</view>
								<view class="f-bt mt10 eh t-o-e">
									<view class="mr5">{{ v.state!=0 && v.people || 0 }}/{{v.type.max}}</view>
									<view v-if="v.state!=0 && v.minutes">{{v.minutes}}分钟</view>
								</view>
								<view style="height: 44rpx;" class="mt10 eh">
									<text v-if="v.state==1" class="wei">待下单</text>
									<text v-else-if="v.state!=0 && v.order && v.order.money" class="wei">￥{{v.order.money}}</text>
								</view>
								<view class="mt35 f-bt eh">
									<view class="sm f-c f12" v-if="v.state!=0 && v.scan==1"
										:style="{color:v.state==2?'#C24243':v.state==1?'#3E9949':v.state==3?'#2979ff':v.state==4?'#DC6523':''}">
										扫码
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-toast ref="uToast" />
			</view>
		</view>
		<view class="nav_item">
			<view v-for="(v,i) in nav" :key="i" class="item f-c-c" :class="{'n_hover':curr==i}" @click="handNav(v,i)">
				<view class="color" :style="{background:v.bgColor,borderColor:v.bColor}"></view>
				<view class="mt5 f11" :style="{color:v.color}">{{v.name}}</view>
				<view class="f11" :style="{color:v.color}">({{v.number}})</view>
			</view>
		</view>
		<!-- 键盘 -->
		<u-popup :show="show" :closeOnClickOverlay="true" round="10" @close="show=false" @open="show=true">
			<view class='p-15-10 c0 f16' style="padding-bottom: 430rpx;">
				<view class="pb10">就餐人数<text class="f12 ml5">({{form.type && form.type.name}}{{form.name}})</text>
				</view>
				<u-input v-model="value" placeholder="请输入就餐人数" border="none" shape="circle"
					:customStyle="{padding:'20rpx',fontWeight:'bold'}" fontSize="22px" disabled></u-input>
				<cuKeyboard ref="cukeyboard" :type="type" @change="change" @confirm="confirm" @hide="show=false">
				</cuKeyboard>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import cuKeyboard from '@/components/cu-keyboard/cu-keyboard.vue'
	export default {
		components: {
			cuKeyboard
		},
		props: {
			list: {
				type: Array,
				default: () => []
			},
			tc: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				show: false,
				value: '',
				type: 'people',
				confirmStyle: {
					backgroundColor: uni.getStorageSync('subject_color')
				},
				form: {},
				curr: 0,
				nav: [{
						bgColor: '#333',
						color: '#333',
						bColor: '#333',
						name: '全部',
						number: '',
						state: '',
					},
					{
						bgColor: '#fff',
						color: '#000',
						bColor: '#999',
						name: '空台',
						number: '',
						state: 'free',
					},
					{
						bgColor: '#3E9949',
						color: '#3E9949',
						bColor: '#3E9949',
						name: '待下单',
						number: '',
						state: 'order',
					},
					{
						bgColor: '#C24243',
						color: '#C24243',
						bColor: '#C24243',
						name: '待结账',
						number: '',
						state: 'settle',
					},
					{
						bgColor: '#DC6523',
						color: '#DC6523',
						bColor: '#DC6523',
						name: '已预结',
						number: '',
						state: 'prepare',
					},
					{
						bgColor: '#2979ff',
						color: '#2979ff',
						bColor: '#2979ff',
						name: '待清台',
						number: '',
						state: 'machine',
					}
				],
			}
		},
		watch: {
			tc(newval) {
				this.nav[0].number = newval.allCount
				this.nav[1].number = newval.freeCount
				this.nav[2].number = newval.orderCount
				this.nav[3].number = newval.settleCount
				this.nav[4].number = newval.prepareCount
				this.nav[5].number = newval.machineCount
			},
		},
		methods: {
			add(item) {
				uni.navigateTo({
					url: '/pages/order/tabels/add?item=' + JSON.stringify(item)
				})
			},
			open(v) {
				this.form = v
				if (v.state == 0 && v.diningType == 4) {
					this.value = v.type.max
					this.show = true
					this.$nextTick(() => this.$refs.cukeyboard.open())
				} else if (v.state == 1 || v.state == 0 && v.diningType == 5) {
					uni.navigateTo({
						url: `/pages/order/orderMeal/index?id=${this.form.id}`
					})
				} else if (v.state == 2 || v.state == 3 || v.state == 4) {
					uni.navigateTo({
						url: `/pages/order/indetail?id=${this.form.orderSn}&type=inStore`
					})
				}
			},
			change(e) {
				this.value = e;
			},
			handNav(v, i) {
				if (this.curr == i) return
				this.curr = i
				this.$emit('hNav', v)
			},
			//去下单
			async confirm(e) {
				if (+this.value) {
					await this.beg.request({
						url: `${this.api.inTabel}/${this.form.id}`,
						method: 'PUT',
						data: {
							people: +this.value
						}
					})
					this.show = false
					uni.navigateTo({
						url: `/pages/order/orderMeal/index?id=${this.form.id}`
					})
				} else {
					this.show = false
					uni.$u.toast('请输入正确就餐人数！');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ugrid {
		flex-shrink: 0;
		flex-grow: 0;
		flex-basis: auto;
		align-content: flex-start;
		width: 100%;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
		display: block;
		// justify-content: center;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.uitem {
		flex-shrink: 0;
		flex-grow: 0;
		flex-basis: auto;
		align-items: center;
		justify-content: center;
		position: relative;
		flex-direction: column;
		box-sizing: border-box;
		display: flex;
		position: relative;
		float: left;
		margin-top: 1rpx;
		background: transparent;
		width: 33.333333333333336%;
	}

	.type {
		display: inline-block;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
	}

	.eh {
		height: 44rpx;
	}

	.sm {
		background: #fff;
		padding: 2rpx 6rpx;
		border-radius: 6rpx;
	}

	.table {
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(221, 221, 221, 0.8);
	}

	.nav_item {
		position: fixed;
		right: 20rpx;
		bottom: 100rpx;
		width: 100rpx;
		text-align: center;
		background: #fff;
		padding: 10rpx;
		border-radius: 10rpx;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(221, 221, 221, 0.8);

		.item {
			margin-bottom: 10rpx;
			padding: 14rpx 0;
			border-radius: 6rpx;
		}

		.color {
			width: 32rpx;
			height: 32rpx;
			border-radius: 6rpx;
			border: 1rpx solid #fff;
		}
	}

	.n_hover {
		background: #f5f5f5;
		font-weight: bold;
	}
</style>